import React from 'react';
import { Button, Form, Input, message, Modal, Select, Upload } from 'antd';

class LabelModal extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      title:'新增标签',
      visible:false,
      id:null,
      imgUrl:null,
      imgSource:null,
      imgName:null,
      labelType:0,
      isEdit:false
    }
  }

  componentDidMount() {
    if(this.props.onRef){
      this.props.onRef(this);
    }
  }

  initModal = info => {
    this.setState({
      id:info ? info.id : null,
      visible:true,
      title:info ? '编辑标签' : '新增标签',
      imgUrl:info ? info.imgUrl : null,
      imgSource:info ? info.imgUrl : null,
      isEdit: info ? true : false,
      labelType:info ? info.type : 0,
    },() => {
      this.props.form.setFieldsValue({
        name:info ? info.name : '',
        type:info ? info.type : '',
        imgUrl:info ? info.imgUrl ? info.imgUrl : null : null
      })
    })
  }

  cancelModal = () => {
    this.props.form.resetFields();
    this.setState({
      visible:false,
      id:null,
      imgUrl:null,
      imgSource:null,
      imgName:null
    })
  }

  onSubmitModal = () => {
    const { form } = this.props;
    const { id,imgUrl,imgName } = this.state;
    form.validateFields((errors, values) => {
      if(!errors){
        let obj = values;
        obj.imgUrl = imgUrl;
        obj.imgName = imgName
        if(id){
          this.props.editLabel(obj,id);
        }else {
          this.props.addLabel(obj)
        }
      }
    })
  }

  beforeUpload = file =>{
    let b = /\.(png|jpg|gif)$/;
    let a = file.name.toLowerCase();

    const pig = b.test(a);
    const isJPG = file.type;
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!pig) {
      if (!isLt2M) {
        message.error('请上传小于2M的图片');
      } else {
        message.error('请上传图片格式');
      }
    } else {
      if (!isLt2M) {
        message.error('请上传小于2M的图片');
      }
    }
    return isJPG && isLt2M && pig;
  }

  handleChangeImage = info => {
    if (info.file.status === 'uploading') {
      return;
    }
    if (info.file.status === 'done') {
      this.getBase64(info.file.originFileObj, imageUrlc =>
        this.setState(
          {
            imgSource:imageUrlc,
            imgUrl: info.file.response.url,
            imgName:info.file.response.name
          },
          () => {}
        )
      );
    }
  }

  getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  };

  changeLabelType = value => {
    this.setState({
      labelType:value
    })
  }

  render() {
    const { title,visible,imgSource,imgUrl,labelType,isEdit } = this.state;
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
    };
    return (
      <Modal
        title={title}
        visible={visible}
        onCancel={this.cancelModal}
        onOk={this.onSubmitModal}
      >
        <Form {...formItemLayout}>
          <Form.Item label={'标签名'}>
            {
              getFieldDecorator('name',{
                rules:[{required:true,message:'请填写标签名'}]
              })(<Input maxLength={10} />)
            }
          </Form.Item>
          <Form.Item label={'标签类型'}>
            {
              getFieldDecorator('type', {
                rules:[{required:true,message:'请填写标签类型'}]
              })(
                <Select onChange={this.changeLabelType} disabled={isEdit}>
                  <Select.Option value={0}>自定义标签</Select.Option>
                  <Select.Option value={1}>底部标签</Select.Option>
                </Select>
              )
            }
          </Form.Item>
          {
            labelType === 0 ?
              <Form.Item label={'上传图片'}>
                {
                  getFieldDecorator('imgUrl',{
                    rules:[{required:true,message:'请上传文件'}]
                  })(
                    <Upload
                      action="/cloud/file/upload"
                      beforeUpload={this.beforeUpload}
                      name="file"
                      listType="picture"
                      showUploadList={false}
                      accept=".png,.jpg"
                      onChange={this.handleChangeImage}
                    >
                      {
                        imgSource ?
                          <img
                            style={{ width: 51, height: 51, borderRadius: '50%' }}
                            src={imgSource}
                            alt="file"
                          />
                          :''
                      }
                      <Button style={{ marginLeft: 10 }} size="small">
                        选择文件
                      </Button>
                    </Upload>
                  )
                }

              </Form.Item>
              :
              ''
          }
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(LabelModal);
